<template>
  <div class="new_album_list">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">
        <NewAlbumList :area="area.all"></NewAlbumList>
      </el-tab-pane>
      <el-tab-pane label="华语" name="second">
        <NewAlbumList :area="area.zh"></NewAlbumList>
      </el-tab-pane>
      <el-tab-pane label="欧美" name="third">
        <NewAlbumList :area="area.ea"></NewAlbumList>
      </el-tab-pane>
      <el-tab-pane label="韩国" name="fourth">
        <NewAlbumList :area="area.kr"></NewAlbumList>
      </el-tab-pane>
      <el-tab-pane label="日本" name="fifth">
        <NewAlbumList :area="area.jp"></NewAlbumList>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import NewAlbumList from './NewAlbumList.vue'
export default {
  components: {
    NewAlbumList
  },
  data () {
    return {
      area: {
        all: 'ALL',
        zh: 'ZH',
        ea: 'EA',
        kr: 'KR',
        jp: 'JP'
      },
      activeName: 'first'
    }
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
    }
  },
  created () {}
}
</script>

<style>
</style>
